<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/16 02:50:34
  @file: ProductIntro.vue
  @description:
  ==================
  Servide 下的 ProductIntro 产品介绍
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="product-intro">
    <div class="panel">
      <NavigationFrame class="card-btn" :totalWidth="35+'%'" :lists="lists" :active="myindex" />
      <div class="box2">
        <!-- 画册盒子 -->
        <div class="brochures">
          <!-- 画册 -->
          <div class="brochure" v-for="brochure in brochures" :key="brochure.name">
            <!-- 画册虚拟高度 -->
            <div class="padding-height">
              <img :src="brochure.img_url" alt="">
            </div>
            <p class="text">{{brochure.name}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavigationFrame from '@/components/navigation-frame.vue';
export default {
  name: 'GFProductIntro',
  components: { NavigationFrame },
  mounted () { this.getApi('/gftopen/service/brochures?type=钢筋建材'); },
  data () {
    return {
      myindex: 0,
      lists: [
        { name: '钢筋建材', click: this.navFClick },
        { name: '家居水暖', click: this.navFClick },
        { name: '管道产业', click: this.navFClick }
      ],
      brochures: []
    };
  },
  methods: {
    navFClick (item, index) {
      this.myindex = index;
      this.getApi('/gftopen/service/brochures?type=' + item.name);
    },
    async getApi (api) {
      const { data: res } = await this.$http(api);

      this.brochures = res.message.brochures
        ? res.message.brochures
        : [];
      console.log(res, this.brochures);
    }
  }
};
</script>

<style lang='scss' scoped>
.panel {
  width: 90%;
  margin: 0 auto;
  ::v-deep.navigation-frame {
    padding: 20px 0;
    width: 90%;
    margin: 0 auto;

    // 导航
    a {
      padding: 20px;
      color: #747474;
      background: #ffffff;
      margin: 0 20px;
      border-radius: 10px;
      border: 1px solid #dddddd;
      font-size: 16px;

      &::before {
        display: none;
      }

      &:hover {
        background: #e1e1e1;
      }
    }

    .router-link-active {
      background: #ffffff;
    }

    .itemActive {
      background: #e1e1e1;
    }
  }
  // 画册切换卡外盒子
  .box2 {
    width: 80%;
    margin: 0 auto;
  }
  // 每个画册
  .brochure {
    display: inline-block;
    margin: 1%;
    width: 23%;
    margin-top: 20px;
    position: relative;
    top: 0;
    transition: 0.3s;
    text-align: center;

    &:hover {
      top: -10px;
    }
    .padding-height {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: (1680 / 1248) * 100%;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }
    }
    .text {
      font-size: 16px;
      background: #f7f7f7;
      padding: 10px;
      /* 超出生省略号 */
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  }
}
</style>
